<template>
	<view class="page">
		<view class="feedback-title"><text>反馈意见</text></view>
		<view class="feedback-body"><textarea placeholder="请填写反馈意见..." v-model="sendDate.content" class="feedback-textare" /></view>
		<view class="feedback-title"><text>图片</text><text >{{ imageList.length }}/3</text></view>
		<view class="feedback-body feedback-uploader">
			<view class="uni-uploader">
				<view class="uni-uploader-body">
					<view class="uni-uploader__files">
						<block v-for="(image, index) in imageList" :key="index">
							<view class="uni-uploader__file" style="position: relative;">
								<image class="uni-uploader__img" :src="image" @tap="previewImage(index)"></image>
								<view class="close-view" @click="close(index)">x</view>
							</view>
						</block>
						<view class="uni-uploader__input-box" v-show="imageList.length < 3"><view class="uni-uploader__input" @tap="chooseImg"></view></view>
					</view>
				</view>
			</view>
		</view>
		<view class="feedback-title"><text>意见类型</text></view>
		<view class="kaung">
			<picker mode="selector" :range="typeArr" @change="typeChange">
				<view>{{typeArr[sendDate.type]}}</view>
			</picker>
		</view>
		
		<!-- <view class="uni-flex">
			<view class="kaung" @click="pickerShow('3')">{{ goods.label }}</view>
		</view> -->
		<view class="feedback-title"><text>联系方式</text></view>
		<view class="feedback-body"><input class="feedback-input" v-model="sendDate.contact" placeholder="请输入联系方式，方便我方进行反馈回复" /></view>
		<button type="default" class="feedback-submit" @tap="send">提交</button>
	</view>
</template>

<script>
import { mapState, mapMutations } from 'vuex';
export default {
	data() {
		return {
			imageList: [],
			typeArr:['报修问题','软件功能'],
			sendDate: {
				type:0,
				content: '',
				contact: '', 
				img1: '',
				img2: '',
				img3: ''
			}
		};
	},
	computed: {
		...mapState(['TOKEN', 'UPDATE', 'URL'])
	},
	onLoad: () => {},
	methods: {
		...mapMutations(['SIGN_OUT', 'TO_UPDATE']),
		close(e) {
			this.imageList.splice(e, 1);
		},
		typeChange: function(e) {
			console.log('picker发送选择改变，携带值为', e.target.value)
			this.sendDate.type = e.target.value
		},
		chooseImg() {
			//选择图片
			uni.chooseImage({
				sourceType: ['camera', 'album'],
				// sizeType: "compressed",
				count: 8 - this.imageList.length,
				success: res => {
					this.imageList = this.imageList.concat(res.tempFilePaths);
				}
			});
		},
		previewImage(index) {
			//预览图片
			uni.previewImage({
				urls: this.imageList,
				current: this.imageList[index]
			});
		},
		send() {
			//发送反馈
			// console.log(JSON.stringify(this.sendDate));
			let imgs = this.imageList.map((value, index) => {
				return {
					name: 'image' + index,
					uri: value
				};
			});
			if (imgs.length == 0) {
				this.upDatefk();
				return;
			}
			for (let i = 0; i < imgs.length; i++) {
				uni.uploadFile({
					url: this.URL + 'feedback/uploadImg',
					header: {
						token: this.TOKEN
					},
					filePath: imgs[i].uri,
					name: 'img',
					success: res => {
						let json = JSON.parse(res.data);
						if (json.success === true) {
							this.sendDate['img' + (i + 1)] = json.data;
							if (i == imgs.length - 1) {
								this.upDatefk();
							}
						} else {
							this.SIGN_OUT();
							uni.showToast({
								icon: 'none',
								title: '账号验证失效，请重新登录'
							});
							setTimeout(() => {
								uni.navigateBack();
							}, 1000);
						}
					}
				});
			}
		},
		upDatefk() {
			console.log(this.sendDate);
			uni.request({
				url: this.URL + 'feedback/addFeedback',
				data: this.sendDate,
				method: 'POST',
				header: {
					token: this.TOKEN,
					"Content-Type":"application/x-www-form-urlencoded"
				},
				success: res => {
					console.log(res.data);
					if (res.data.success) {
						uni.showToast({
							title: '反馈成功!'
						});
						setTimeout(() => {
							uni.navigateBack();
						}, 1000);
					} else {
						this.SIGN_OUT();
						uni.showToast({
							icon: 'none',
							title: '账号验证失效，请重新登录'
						});
						setTimeout(() => {
							uni.navigateBack();
						}, 1000);
					}
				}
			});
		}
	}
};
</script>

<style>
.page {
	background-color: #efeff4;
	width: 750upx;
}

.input-view {
	font-size: 28upx;
}
.close-view {
	text-align: center;
	line-height: 14px;
	height: 16px;
	width: 16px;
	border-radius: 50%;
	background: #ff5053;
	color: #ffffff;
	position: absolute;
	top: -6px;
	right: -4px;
	font-size: 12px;
}
.feedback-body input {
	font-size: 32upx;
	text-indent: 0.5em;
}
button {
	background: #007aff;
	color: white;
}
.kaung {
		text-align: center;
		height: 80upx;
		line-height: 80upx;
		background: #d8d8d8;
		flex: 1;
	}
	.kaung uni-view{
		height: 80upx;
		line-height: 80upx;
	}
		
</style>
